<!--
 * @author: Kate-sy
 * @create: 2021-06-22 09:03 AM
 * @license: MIT
 * @lastAuthor: Spring
 * @lastEditTime: 2021-06-28 11:07 AM
 * @desc: 
-->
<template>
  <div class="lenav-wrap">
    <!-- <div
      class="peitem"
      :key="item"
      v-for="item in pedata"
      @click="lefcard($event)"
    >
      {{ item }}
    </div>
    <div class="hr"></div> -->
    <div
      class="peitem"
      :key="item.tag_id"
      v-for="item in tag"
      @click="lefcard($event,item)"
    >
      {{ item.tag_name }}
    </div>
  </div>
</template>
<script>
  import {tagRanking} from '/utils/api.js'
export default {
  name: "Leftnav",
  data() {
    return {
      tag:[
        {tag_name:'推荐',tag_id:false}
      ],
    };
  },
  mounted(){
    this.gettag()
  },
  methods: {
    lefcard(e,item) {
      let peitem = document.querySelectorAll(".peitem");
      peitem.forEach((ele) => {
        ele.style.cssText = "background-color:#fff;color:#909090";
      });
      e.target.style.cssText = "background-color: #007fff;color: #fff;";
      this.$store.commit('setTagId',item.tag_id)
    },
    gettag(){
      tagRanking().then(res=>{
        this.tag=[...this.tag,...res.data]
      })
    }
  },
};
</script>
<style lang="scss" scpoed>
.lenav-wrap {
  background-color: #fff;
  @include flex(center);
  margin: auto;
  flex-wrap: wrap;
  width: 88px;
  padding: 16px 12px 5px 12px;
  position: fixed;
  left: 450px;
  top: 70px;
  .peitem {
    width: 76px;
    height: 31px;
    padding: 0px 6px;
    border-radius: 2px;
    text-align: center;
    line-height: 31px;
    margin-top: 10px;
    margin-bottom: 10px;
    @include font(15px, #909090);
    @include onerow();
    &:hover {
      background-color: #f7f7f7;
      color: #007fff;
      cursor: pointer;
    }
  }
  .hr {
    width: 100%;
    height: 1px;
    margin-bottom: 10px;
    background: #eeefef;
  }
  .peitem:nth-child(1) {
    background-color: #007fff;
    color: #fff;
  }
}
</style>